/* Fix by angular ng-animate */
[ng\:cloak], [ng-cloak], .ng-cloak
  display: none !important
.ng-hide,
.ng-hide-animate,
.__hide
  display: none

/* Other */
.no-data,
.__gray
  color: #999
.__lightblue
  color: #B8D0DF
.block
  margin: 0 0 20px
.alt-description
  color: #43b0e6 !important
.demo-warning
  align-items: center
  background: $redBg
  color: $whiteColor
  display: flex
  font-family: $font
  font-size: 13px
  justify-content: center
  height: 30px
  left: 0
  position: absolute
  right: 0
  text-align: center
  top: 0
  z-index: 9000

/* CodeMirror */
.blade-content .CodeMirror
  direction: ltr
  font-size: 13px
  height: 100%

/* Scrollbar Chrome, Edge*/

*::-webkit-scrollbar
  background-color: $scrollTrackColor
  width: $scrollWidth
  height: $scrollHeight

*::-webkit-scrollbar-thumb
  background-color: $scrollThumbColor
  border-radius: 4px

/* Scrollbar Firefox*/
*
  scrollbar-width: thin
  scrollbar-color: $scrollThumbColor $scrollTrackColor

/* Scrollbar IE */
*
  -ms-scrollbar-arrow-color: $scrollTrackColor
  -ms-scrollbar-face-color: $scrollThumbColor
  -ms-scrollbar-shadow-color: $scrollThumbColor
  -ms-scrollbar-track-color: $scrollTrackColor

/* Platform error bar */
.platform-error-bar
  background: $genericErrorColor
  color: $whiteColor
  font-family: $font
  font-size: 13px
  left: 0
  position: absolute
  right: 0
  top: 0
  text-align: center
  z-index: 9000
  a
    color: $whiteColor
  .close
    cursor: pointer
    position: absolute
    right: 15px
    top: 12px
    z-index: 5
  .error-title
    height: $headerHeight
    line-height: $headerHeight
    position: relative

    //@include align-items(center)
    //@include display(flex)
    //@include justify-content(center)
  .more
    color: $whiteColor
    font-size: 12px
    position: absolute
    right: 40px
    top: 50%

    transform: translateY(-50%)
  .error-detail
    margin: 5px 0
    max-height: 250px
    padding: 10px 20px
    text-align: left
    overflow: auto

/* Flags */
@import "../includes/_flags.sass"

.error
  color: $genericErrorColor
  display: block
  font-size: 12px
  line-height: 1.4
  padding: 5px 0

.__disabled,
.__disabled > *
  filter: alpha(opacity=60)
  opacity: .6
  pointer-events: none
*:disabled
  cursor: not-allowed
  filter: alpha(opacity=60)
  opacity: .6
input:read-only
  opacity: .6
  pointer-events: none
.table .table-item:hover,
.__items .list-item:hover,
.__files .list-block:hover
  background: $navbarItemOver
.nav-bar .bar .__items .list-item
  &:hover
    background: $navbarItemOver
  &.__animated
    background: #43b0e6
.table .table-item.__selected,
.__items .list-item:focus,
.__items .list-item.__selected,
.__files .list-item.__selected > .list-block
  background: #d9effa
.__items label.list-item.__selected
  background: $whiteColor

/* Icons */
.tile-ico,
.__items .menu-ico,
.__items .list-ico,
.__files .list-ico
  color: #a6a6a6
.tile:hover .tile-ico,
.__items .list-item:hover .list-ico,
.__items .list-item.__selected .list-ico,
.__files .list-block:hover .list-ico,
.__files .list-item.__selected > .list-block .list-ico
  color: $colorText
  text-shadow: none
.nav-bar .bar .__items .list-item
  &:hover .list-ico
    color: $colorText
    text-shadow: none
  &.__animated .list-ico,
  &.__animated:hover .list-ico
    color: #fff
    text-shadow: none
.dropdown.__more .dropdown-content  .list-item .list-fav:hover .list-ico
    color: $orangeBg
%icon
    margin-bottom: 7px
img.list-icon
    @extend %icon
    height: 32px
    width: 32px
    object-fit: contain
    border-radius: 16px
img.title-icon
    @extend %icon
    height: 34px
    width: 34px
    object-fit: contain
    border-radius: 17px

/* Links */
a
  color: $baseColor
  cursor: pointer
  font-size: 12px
  text-decoration: none
.link
  text-decoration: underline
a:hover,
.link:hover
  color: #52a2ca
.__link
  cursor: pointer
.__blue
  color: $baseColor

/* Transitions */
.nav-bar .menu-link,
.dropdown .dropdown-close,
.dropdown-content .list-link,
.blade-toolbar .menu-btn,
.pagination .menu-link,
.__items .menu-ico,
.__items .list-ico,
.breadcrumbs .menu-link,
.text-mini.__link,
.menu.__context .menu-item,
.nav-bar .menu-ico
  transition: color .25s ease-in-out 0s
.nav-bar
  transition: width .25s ease-in-out 0s
.nav-bar .dropdown.__opened
  transition: transform .25s ease-in-out 0s
.cnt,
.uk-htmleditor-fullscreen
  transition: left .25s ease-in-out 0s, right .25s ease-in-out 0s
.dropdown-content .list-link,
.blade-nav .menu-item,
.table .table-item,
.pagination .menu-link,
.__items .list-item,
.product-img .image,
.btn,
.form-control.__switch .switch,
.list.__notice .list-link,
.nav-bar .bar .__items .list-item .__animated,
.tree-block
  transition: background-color .35s ease-in-out 0s
.__items .list-item
  transition: background-color .35s ease-in-out 0s, width .25s ease-in-out 0s
.dashboard .dashboard-account,
.form-input input,
.form-input textarea,
.tile-gallery .gallery-img
  transition: border-color .2s ease-in-out 0s
.tile,
.gridster .list-item
  transition: box-shadow .25s ease-in-out 0s, height .25s ease-in-out 0s, width .25s ease-in-out 0s
.tile-ico
  transition: color .25s ease-in-out 0s, margin .25s ease-in-out 0s
.tile.__selected:after,
.tile.__selected:before,
.btn
  transition: opacity .25s ease-in-out 0s
/* Progress bar */
.progress-bar
  background-color: #444
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0))
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0))
  background-size: 30px 30px
  height: 20px
  margin: 10px 0

  animation: progress 5s infinite linear
.progress-bar.__aqua
  background-color: $baseColor
.progress-bar.__mini
  background-size: 15px 15px
  height: 8px

  animation: 2s linear 0s infinite running progress-mini

/* Animations */
@keyframes progress
  from
    background-position: 0 0
  to
    background-position: -60px 0

@keyframes progress-mini
  from
    background-position: 0 0
  to
    background-position: -30px 0

/* Preloaders */
@keyframes loader
  0%
    opacity: 0
    filter: alpha(opacity=0)
    transform: translateX(0)
  30%
    opacity: 1
    filter: alpha(opacity=100)
    transform: translateX(120px)
  60%
    opacity: 1
    filter: alpha(opacity=100)
    transform: translateX(120px)
  90%
    opacity: 0
    filter: alpha(opacity=0)
    transform: translateX(500px)
  100%
    opacity: 0
    filter: alpha(opacity=0)
    transform: translateX(500px)

@keyframes notify
  0%
    background-color: transparent
  30%
    background-color: $baseColor
  90%
    background-color: $baseColor
  100%
    background-color: transparent

@keyframes bell
  0%,
  100%
    transform: rotate(0)
  10%,
  30%,
  50%,
  70%,
  90%
    transform: rotate(-7deg)
  20%,
  40%,
  60%,
  80%
    transform: rotate(7deg)

@keyframes blade
  0%
    transform: translateX(getBladeContentSize('Normal') * -1)
  100%
    transform: translateX(0)
